<template>
  <div class="setting">
    <el-card class="box-card">
      <el-tabs v-model="activeName" class="tab">
        <el-tab-pane label="角色管理" name="first">
          <el-button
            type="primary"
            size="small"
            icon="el-icon-plus"
            style="dispaly:block"
            @click="dialogFormVisible = true"
            >新增角色</el-button
          >
          <el-table border :data="tableData" style="width: 100%">
            <el-table-column label="序号" width="180" type="index">
            </el-table-column>
            <el-table-column sortable prop="name" label="角色名" width="180">
            </el-table-column>
            <el-table-column sortable prop="description" label="描述">
            </el-table-column>
            <el-table-column
              fixed="right"
              label="操作"
              width="180"
              style="text-align:center"
            >
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="small"
                  @click="editPermision(scope.row)"
                  >分配权限</el-button
                >
                <el-button
                  @click="editClick(scope.row.id)"
                  type="text"
                  size="small"
                  >修改</el-button
                >
                <el-button
                  type="text"
                  size="small"
                  @click="delClick(scope.row.id)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页器 -->
          <el-pagination
            @current-change="handleCurrentChange"
            current-page.sync="page.page"
            :page-size="page.pagesize"
            layout="total, prev, pager, next"
            :total="page.total"
          >
          </el-pagination>
        </el-tab-pane>
        <!-- 第二个tab栏 -->
        <el-tab-pane label="公司信息" name="second">
          <!-- 提示信息 -->
          <el-alert
            title="对公司名称、公司地址、营业执照、公司地区的更新，将使得公司资料被重新审核，请谨慎修改"
            type="info"
            show-icon
            :closable="false"
            style="margin-bottom:10px"
          />
          <el-form ref="form" :model="form" label-width="220px">
            <el-form-item label="企业名称">
              <el-input
                v-model="form.name"
                disabled
                style="width:420px"
              ></el-input>
            </el-form-item>
            <el-form-item label="公司地址">
              <el-input
                v-model="form.companyAddress"
                disabled
                style="width:420px"
              ></el-input>
            </el-form-item>
            <el-form-item label="公司电话">
              <el-input
                v-model="form.companyPhone"
                disabled
                style="width:420px"
              ></el-input>
            </el-form-item>
            <el-form-item label="邮箱">
              <el-input
                v-model="form.mailbox"
                disabled
                style="width:420px"
              ></el-input>
            </el-form-item>
            <el-form-item label="备注">
              <el-input
                v-model="form.remarks"
                disabled
                style="width:420px"
              ></el-input>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
      <!-- 编辑弹窗 -->
      <editrole
        ref="editform"
        :dialogFormVisible.sync="dialogFormVisible"
        @primaryClick="getPrimarClick"
        @updateMsg="updateMsg"
        @giveupchange="giveupchange"
      ></editrole>
      <!-- 给角色分配权限 -->
      <permission
        :showEditPerm.sync="showEditPerm"
        :editClickNode="editClickNode"
        ref="perMission"
      ></permission>
    </el-card>
  </div>
</template>

<script>
import { getAllRole, delRole, getCompany } from '@/api/setting'
// 导入组件
import editrole from './components/editrole.vue'
import permission from './components/permission.vue'
import state from '@/store'
export default {
  name: 'setting',
  components: {
    editrole,
    permission
  },
  data () {
    return {
      // 默认选中
      activeName: 'first',
      tableData: [],
      form: {},
      dialogFormVisible: false,
      showEditPerm: false,
      page: {
        total: 0,
        page: 1,
        pagesize: 10
      },
      editClickNode: {}
    }
  },
  methods: {
    // 获取公司信息
    async getCompany () {
      let res = await getCompany(state.getters.companyId)
      this.form = res.data
    },
    handleCurrentChange (newPage) {
      this.page.page = newPage
      this.getAllRole()
    },
    // 修改
    async editClick (id) {
      this.dialogFormVisible = true
      this.$refs.editform.getRoleById(id)
    },
    // 获取所有的角色信息
    async getAllRole () {
      let res = await getAllRole(this.page)
      this.page.total = res.data.total
      this.tableData = res.data.rows
    },
    // 删除
    async delClick (id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await delRole(id)
          // 刷新页面
          this.getAllRole()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 确认按钮
    async getPrimarClick () {
      this.dialogFormVisible = false
    },
    // 刷新页面
    updateMsg () {
      this.getAllRole()
    },
    giveupchange () {
      this.dialogFormVisible = false
    },

    /**
     * 修改权限
     */
    async editPermision (scope) {
      this.editClickNode = scope
      this.$refs.perMission.getRoleById()
      this.showEditPerm = true
    }
  },
  async created () {
    this.getAllRole()
    this.getCompany()
  }
}
</script>

<style scoped lang="scss">
.setting {
  ::v-deep .box-card {
    margin: 20px;
    .el-pagination {
      text-align: end;
    }
    thead th {
      background-color: #fafafa;
      border-bottom: 2px solid rgba(0, 0, 0, 0.1);
    }
  }
}
</style>
